<template>
  <div id="Tx">
    <div class="Tx-div">
      <el-table :data="tableData" stripe>
        <el-table-column prop="date" label="日期" width="auto">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="auto">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Tx',
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {

    }
  }

</script>

<style scoped lang="scss">
  .Tx{
    width: 100%;
    // display: flex;
    margin: 0;
    padding: 0;
    height: auto;
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .Tx-div{
    width: 98%;
    display: block;
  }
  // @media screen and (max-width: 1000px) {
  //     .Tx-div{
  //       width: 98%;
  //       display: block;
  //       padding-top: 2%;
  //     }
  // }
</style>
